<template>
  <mes-box v-model="modelValue" :width="1100" title="生产工单详情">
    <div class="order-detail" style="z-index: 9999; position: relative;">
      <!-- 工单基本信息 -->
      <el-card> 
        <div style="display: flex; flex-wrap: wrap;">
          <div style="flex:1 0 300px;">工单状态: {{ detail.WorkOrderStatus || '-' }}</div>
          <div style="flex:1 0 300px;">工单编号：{{ detail.ProductionWorkOrderCode || '-' }}</div>
          <div style="flex:1 0 300px;">工单优先级：{{ detail.WorkOrderPriority || '-' }}</div>
          <div style="flex:1 0 300px;">车间：{{ detail.WorkshopId || '-' }}</div>
          <div style="flex:1 0 300px;">工艺路线：{{ detail.ProcessmanagementId || '-' }}</div>
          <div style="flex:1 0 300px;">创建人：{{ detail.Creator || '-' }}</div>
          <div style="flex:1 0 300px;">创建时间：{{ detail.CreateDate || '-' }}</div>
        </div>
      </el-card>

      <!-- 成品信息 -->
      <el-card style="margin-top: 20px;">
        <template #header>成品信息</template>
        <el-table :data="detail.OrderProductList || []" style="width: 100%;">
          <el-table-column prop="productCode" label="成品编号"/>
          <el-table-column prop="productName" label="成品名称"/>
          <el-table-column prop="productType" label="规格型号"/>
          <el-table-column prop="productBatch" label="批次号"/>
          <el-table-column prop="sizeName" label="原料尺寸"/>
          <el-table-column prop="danWeiName" label="原料单位"/>
          <el-table-column prop="productCompany" label="成品单位">
            <template #default="scope">
              {{ getProductUnitText(scope.row.productCompany) }}
            </template>
          </el-table-column>
          <el-table-column prop="productNumS" label="库存上限"/>
          <el-table-column prop="rawmanagementId" label="原料编号"/>
          <el-table-column prop="rawmanagementBh" label="原料名称"/>
          <el-table-column prop="productState" label="成品状态">
            <template #default="scope">
              {{ getProductStateText(scope.row.productState) }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 关联生产计划 -->
      <el-card style="margin-top: 20px;">
        <template #header>关联生产计划</template>
        <el-table :data="detail.PlanList || []" style="width: 100%;">
          <el-table-column prop="PlanCode" label="生产计划编号"/>
          <el-table-column prop="PlanStatus" label="计划状态"/>
          <el-table-column prop="ProductCode" label="成品编号"/>
          <el-table-column prop="ProductType" label="规格型号"/>
          <el-table-column prop="PlanNum" label="计划产量"/>
          <el-table-column prop="OrderCode" label="订单编号"/>
          <el-table-column prop="DeliveryDate" label="交付日期"/>
          <el-table-column prop="ProcessLine" label="工艺路线"/>
          <el-table-column prop="CarNo" label="车间"/>
          <el-table-column prop="PlanStartDate" label="计划开始日期"/>
          <el-table-column prop="PlanEndDate" label="计划结束日期"/>
        </el-table>
      </el-card>

      <!-- 关联工单 -->
      <el-card style="margin-top: 20px;">
        <template #header>关联工单</template>
        <el-table :data="detail.WorkOrderList || []" style="width: 100%;">
          <el-table-column prop="WorkOrderCode" label="工单编号"/>
          <el-table-column prop="WorkOrderStatus" label="工单状态"/>
          <el-table-column prop="PlanStartDate" label="计划开始日期"/>
          <el-table-column prop="PlanEndDate" label="计划结束日期"/>
          <el-table-column prop="ProductName" label="成品名称"/>
          <el-table-column prop="ProductCode" label="成品编号"/>
          <el-table-column prop="ProductCompany" label="单位"/>
          <el-table-column prop="PlanNum" label="计划产量"/>
          <el-table-column prop="FinishNum" label="完成数量"/>
          <el-table-column prop="CarNo" label="车间"/>
          <el-table-column prop="ProcessLine" label="工艺路线"/>
          <el-table-column prop="CurrentProcess" label="当前工序"/>
          <el-table-column prop="OrderSource" label="订单来源"/>
          <el-table-column prop="ProductionOrderCode" label="生产订单号"/>
          <el-table-column prop="OrderCode" label="订单编号"/>
          <el-table-column prop="CreateUserName" label="创建人"/>
        </el-table>
      </el-card>
    </div>
    <template #footer>
      <el-button @click="close">关闭</el-button>
    </template>
  </mes-box>
</template>

<script>
import { ref, watch, computed } from 'vue';
import MesBox from "@/components/basic/MesBox.vue";

export default {
  components: {
    MesBox
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    detail: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['update:visible'],
  setup(props, { emit }) {
    // 使用计算属性将visible属性映射到modelValue属性
    const modelValue = computed({
      get: () => props.visible,
      set: (value) => emit('update:visible', value)
    });

    const getProductUnitText = (unitId) => {
      const stateMap = {
        1: '个',
        2: '箱',
        3: '件',
        4: '套',
        5: '台',
        6: '米',
        7: '条',
      };
      return stateMap[unitId] || '未知单位';
    };

    const getProductStateText = (stateId) => {
      const stateMap = {
        1: '启用',
        2: '禁用',
      };
      return stateMap[stateId] || '未知状态';
    };

    function close() {
      emit('update:visible', false);
    }

    return {
      modelValue,
      getProductUnitText,
      getProductStateText,
      close
    };
  }
};
</script>

<style scoped>
.order-detail { 
  padding: 10px; 
}
.el-card {
  margin-bottom: 20px;
}
</style>